<template>
  <div>
    <h1 v-if="loading">loading...</h1>
    <div class="row" v-else-if="!!users.length">
      <div class="card" v-for="user in users" :key="user.id">
        <a :href="user.html_url" target="_blank">
          <img :src="user.avatar_url" style="width: 100px" />
        </a>
        <p class="card-text">{{ user.login }}</p>
      </div>
    </div>
    <h1 v-else>请输入搜索内容</h1>
  </div>
</template>

<script>
export default {
  name: "Footer",
  data() {
    return {
      loading: false,
      users: [],
    };
  },
  mounted() {
    //定义修改这个数组的方法
    this.$bus.$on("addUser", this.addUser);
    //定义改变loading状态的方法
    this.$bus.$on("setLoading", this.setLoading);
  },

  methods: {
    addUser(arr) {
      this.users = arr;
    },
    setLoading(isDone) {
      this.loading = isDone;
    },
  },
};
</script>

<style>
.card {
  float: left;
  width: 33.333%;
  padding: 0.75rem;
  margin-bottom: 2rem;
  border: 1px solid #efefef;
  text-align: center;
}

.card > img {
  margin-bottom: 0.75rem;
  border-radius: 100px;
}

.card-text {
  font-size: 85%;
}
</style>